<template>
    <!-- 系统设置 -->
    <div class="set">
        <!-- 头部 -->
        <div class="head">
            <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                <el-tab-pane label="网站设置" name="first">
                    <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px"
                        class="demo-ruleForm" :size="formSize" status-icon>
                        <!-- 网站名称 -->
                        <el-form-item label="网站名称" prop="sitename">
                            <el-input v-model="ruleForm.sitename" />
                        </el-form-item>
                        <!-- 网站url -->
                        <el-form-item label="网站url" prop="url">
                            <el-input v-model="ruleForm.url" />
                        </el-form-item>
                        <!-- 关键字 -->
                        <el-form-item label="关键字" prop="keywords">
                            <el-input v-model="ruleForm.keywords" />
                        </el-form-item>
                        <!-- 简介 -->
                        <el-form-item label="简介" prop="desc">
                            <el-input v-model="ruleForm.desc" />
                        </el-form-item>
                        <!-- 版权 -->
                        <el-form-item label="版权" prop="copyright">
                            <el-input v-model="ruleForm.copyright" />
                        </el-form-item>
                        <!-- 小程序ID -->
                        <el-form-item label="小程序ID" prop="miniappid">
                            <el-input v-model="ruleForm.miniappid" />
                        </el-form-item>
                        <!-- 小程序密钥 -->
                        <el-form-item label="小程序密钥" prop="minisecret">
                            <el-input v-model="ruleForm.minisecret" />
                        </el-form-item>
                        <!-- 公账号ID -->
                        <el-form-item label="公账号ID" prop="appid">
                            <el-input v-model="ruleForm.appid" />
                        </el-form-item>
                        <!-- 公众号密钥 -->
                        <el-form-item label="公众号密钥" prop="appsecret">
                            <el-input v-model="ruleForm.appsecret" />
                        </el-form-item>
                        <!-- 图片上传  -->
                        <el-form-item label="微信小程序banner图片" prop="minibanner" style="margin-left:30px;">
                            <el-upload action="#" list-type="picture-card" :auto-upload="false">
                                <el-icon>
                                    <Plus />
                                </el-icon>

                                <template #file="{ file }">
                                    <div>
                                        <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
                                        <span class="el-upload-list__item-actions">
                                            <span class="el-upload-list__item-preview"
                                                @click="handlePictureCardPreview(file)">
                                                <el-icon>
                                                    <zoom-in />
                                                </el-icon>
                                            </span>
                                            <span v-if="!disabled" class="el-upload-list__item-delete"
                                                @click="handleDownload(file)">
                                                <el-icon>
                                                    <Download />
                                                </el-icon>
                                            </span>
                                            <span v-if="!disabled" class="el-upload-list__item-delete"
                                                @click="handleRemove(file)">
                                                <el-icon>
                                                    <Delete />
                                                </el-icon>
                                            </span>
                                        </span>
                                    </div>
                                </template>
                            </el-upload>

                            <el-dialog v-model="dialogVisible">
                                <img w-full :src="dialogImageUrl" alt="Preview Image" />
                            </el-dialog>
                        </el-form-item>
                        <!-- 提交按钮 -->
                        <el-form-item>
                            <el-button type="primary" @click="submitForm">提交</el-button>
                        </el-form-item>
                    </el-form>
                </el-tab-pane>
                <el-tab-pane label="离校二维码" name="second" class="second">
                    <img src="http://visit.lening365.com/static/img/20220424145635.b81a2f62.jpg" alt="">
                    <span>下载二维码</span>
                </el-tab-pane>
                <el-tab-pane label="Form表单设置" name="third" class="third">
                    <!-- 列表 -->
                    <div v-show="!addDialogVisible">
                        <!-- 添加 -->
                        <el-button class="add" style="margin-bottom: 20px;" @click="addDialogVisible = true">添加
                        </el-button>
                        <!-- table表格 -->
                        <el-table ref="multipleTableRef" :data="tableData" border
                            style="width: 100%;text-align: center;" @selection-change="handleSelectionChange">
                            <el-table-column type="selection" width="55" />
                            <el-table-column prop="fieldname" label="核销人姓名" show-overflow-tooltip />
                            <el-table-column prop="is_null" label="是否启用" show-overflow-tooltip>
                                <template #default="scope">
                                    <div>
                                        <el-switch v-model="scope.row.is_null" class="mb-2" @change="getSwit(scope.row)"
                                            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" />
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column label="操作" width="200">
                                <template #default="scope">
                                    <el-button link type="primary" size="small" @click.prevent="deleteRow(scope.row)">
                                        删除
                                    </el-button>
                                    <el-button link type="primary" size="small" @click.prevent="addRow(scope.row)">
                                        修改
                                    </el-button>
                                </template>
                                <!-- <button class="xiougai">修改</button> -->
                                <!-- <button class="shanchu" @click="del">删除</button> -->
                            </el-table-column>
                        </el-table>
                    </div>

                    <!-- 添加--修改  框 -->
                    <div v-show="addDialogVisible" class="add_data">
                        <el-form :model="add" label-width="120px" :rules="rul">
                            <el-form-item label="form表单名" prop="username">
                                <el-input v-model="add.username" />
                            </el-form-item>
                            <el-form-item label="是否开启">
                                <el-switch v-model="add.is_null" class="mb-2"
                                    style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" />
                            </el-form-item>
                        </el-form>
                        <div style="margin-left: 100px;">
                            <el-button @click="cancel">取消</el-button>
                            <el-button type="primary" @click="Add">确定</el-button>
                        </div>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>

<script setup lang='ts'>
import { onMounted, reactive, ref, watch, watchEffect, } from 'vue';
import type { FormInstance, FormRules, TabsPaneContext, UploadFile } from 'element-plus'
// 接口
import http from '../../api/settings/settings'

let wang: any = ref({
    name: "3"
})
// 表格-----添加
const add = reactive({
    id: "",
    username: '',
    is_null: ref(true)
})
const rul = reactive({
    username: [
        { required: true, message: '表单名不能为空', trigger: 'blur' },
        // { min: 1, max: 10, message: '表单名为1-10个字符', trigger: 'blur' },
    ],
})
let addDialogVisible: any = ref(false)
// 修改
const addRow = (val: any) => {
    addDialogVisible.value = true
    console.log(val);
    add.id = val.id
    add.username = val.fieldname
    add.is_null = val.is_null
}
// 添加
const Add = async () => {
    let addis_null: any = ref(null)
    if (add.is_null === true) {
        addis_null = 1
    } else {
        addis_null = 0
    }
    let addname: any = ref("")
    if (add.id === "") {
        addname = "添加成功"
    } else {
        addname = "修改成功"
    }
    const res: any = await http.fieldEdit({
        id: add.id, //有id表示 编辑 没有id 表示添加
        formdata: {
            fieldname: add.username,
            is_null: addis_null
        }
    })
    if (res.code == "00000") {
        add.id = ""
        add.username = ""
        add.is_null = false
        addDialogVisible.value = false
        geilist()
        ElMessage({
            message: addname,
            type: 'success',
        })
    } else {
        ElMessage.error('失败')
    }
    // console.log('添加', res);
}
// 取消添加
const cancel = () => {
    addDialogVisible.value = false
}


const deleteRow = (val: number) => {
    // console.log(val);
}

// 复选框
const multipleSelection = ref<any>([])
const handleSelectionChange = (val: any) => {
    multipleSelection.value = val
    // console.log(val);
}
// ----------- 图片上传 --------------
const dialogImageUrl = ref('')
const dialogVisible = ref(false)
const disabled = ref(false)
const handleRemove = (file: UploadFile) => {
    // console.log(file)
}
const handlePictureCardPreview = (file: UploadFile) => {
    dialogImageUrl.value = file.url!
    dialogVisible.value = true
    // console.log(file)
}
const handleDownload = (file: UploadFile) => {
    // console.log(file.name)
}

// ------------ form表单 --------------
const formSize = ref('default')
const ruleFormRef = ref<FormInstance>()
// 表单要绑定的值
const ruleForm = reactive({
    sitename: '北京科技经营管理学院',
    url: 'http://www.jgy1985.cn',
    keywords: '品学兼修，开物成务',
    desc: '北京科技经营管理学是经教育部批准的的全日制普通高等职业院校',
    copyright: '北京科技经营管理学院',
    miniappid: 'wxad7528a252dd680a',
    minisecret: '00257f3127812eb81e0a3ec036e9efg',
    appid: 's',
    appsecret: 's',
    minibanner: 'https://img1.baidu.com/it/u=133990705,310893509&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1668099600&t=bd38bf6fe8b5cb0c0b26b23227b44bb5',
})
// 表单不能为空
const rules = reactive<FormRules>({
    sitename: [
        { required: true, message: '网站名称不能为空', trigger: 'blur' },
        // { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
    ],
    url: [
        { required: true, message: '网站地址不能为空', trigger: 'blur' },
        // { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
    ],
    keywords: [
        { required: true, message: '关键字不能为空', trigger: 'blur' },
        // { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
    ],
    desc: [
        { required: true, message: '简介不能为空', trigger: 'blur' },
        // { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
    ],
    copyright: [
        { required: true, message: '版权不能为空', trigger: 'blur' },
        // { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
    ],
    miniappid: [
        { required: true, message: '小程序ID不能为空', trigger: 'blur' },
        // { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
    ],
    minisecret: [
        { required: true, message: '小程序密钥不能为空', trigger: 'blur' },
        // { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
    ],
    appid: [
        { required: true, message: '公账号ID不能为空', trigger: 'blur' },
        // { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
    ],
    appsecret: [
        { required: true, message: '公众号密钥不能为空', trigger: 'blur' },
        // { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
    ],
})

// 提交按钮
const submitForm = async () => {
    const res: any = await http.settinglistEdit({})
    // console.log('res', res)

}

// ------------ 头部tab切换 -------------
const activeName = ref('first')
const handleClick = async (tab: TabsPaneContext, event: Event) => {
    // console.log(11111111,tab, event)

}

// 数据
const tableData = ref([])

let isNull: any = ref()
// 修改开关的值
const getSwit = async (val: any) => {
    // console.log(222, val);
    if (val.is_null === true) {
        isNull = 1
    } else {
        isNull = 0
    }
    // console.log(111, isNull);
    const res: any = await http.fieldEdit({
        id: val.id,
        formdata: {
            fieldname: val.fieldname,
            is_null: isNull
        }
    })
    // console.log(res);
    if (res.code == '00000') {
        geilist()
        ElMessage({
            message: '修改成功',
            type: 'success',
        })
    } else {
        ElMessage.error('修改失败')
    }

}
// 列表
async function geilist() {
    const res: any = await http.systemctlField({})
    // console.log(res);
    if (res.code == "00000") {
        tableData.value = res.data
        tableData.value.length = 10
        tableData.value.forEach((val: any) => {
            if (val.is_null == 0) {
                val.is_null = false
            } else {
                val.is_null = true
            }
            // console.log(val.is_null)
        })
        // console.log(tableData)
    }

}

onMounted(() => {
    geilist()
})
</script>

<style scoped lang='less'>
/* @import url(); 引入css类 */

.wang1 {
    background-color: red;
}

.wang2 {
    background-color: greenyellow;
}

.wang3 {
    background-color: black;
}


.dialog-footer button:first-child {
    margin-right: 10px;
}

.xiougai {
    width: 50px;
    background-color: blue;
    border: none;
    margin-left: 25px;
    color: #ffffff;
    border-radius: 3px;
}

.shanchu {
    border: none;
    width: 50px;
    background-color: red;
    margin-left: 25px;
    color: #ffffff;
    border-radius: 3px;
}

.third {
    .add {
        background-color: rgb(38, 170, 38);
        border: none;
        border-radius: 2px;
        color: #ffffff;
    }
}

.second {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: green;
    margin-top: 100px;

    img {
        width: 300px;
        height: 300px;
        margin-bottom: 20px;
    }

}

.el-input {
    width: 400px;
}

.demo-tabs>.el-tabs__content {
    padding: 32px;
    color: #6b778c;
    font-size: 32px;
    font-weight: 600;
}
</style>


  
  